

<script setup lang="ts">
import MyTabbar from '../components/my-tabbar/index.vue'
import ProductPad from './components/product-pad/index.vue'
/*========================================>( 模型属性 )<========================================*/
const swiperList = ref<Array<string>>(['https://cdn.uviewui.com/uview/swiper/swiper1.png',
  'https://cdn.uviewui.com/uview/swiper/swiper2.png',
  'https://cdn.uviewui.com/uview/swiper/swiper3.png'])
const showCityPad = ref<boolean>(false)
const checkItemList = ref<Array<any>>([
  {
    name: '基础体检套餐',
    img: 'https://img.yuntongjiankang.com/2021111418192116093.jpg',
    price: '206',
    detail: '全民体检|关注健康',
    count:256
  },
  {
    name: '珍爱父母套餐',
    img: 'https://img.yuntongjiankang.com/2021111417220192000.jpg',
    price: '608',
    detail: '关爱父母健康',
    count:105
  },
  {
    name: '健康证体检套餐',
    img: 'https://img.yuntongjiankang.com/2023123116081196266.jpg',
    price: '75',
    detail: '团队体检，仅限8人以上使用',
    count:487
  }
])
/*========================================>( 本地属性 )<========================================*/

const handleCityChanged = () => {
  showCityPad.value = true
}
const handleCityPadClosed = () => {
  showCityPad.value = false
}
</script>

<template>
  <view class="home content">
    <up-navbar title="雨田健康服务中心" @leftClick="handleCityChanged" placeholder>
      <template #left>
        <svg-icon name="location" width="20" height="20" />
        <view class="decoration-underline">临汾市</view>
      </template>
    </up-navbar>
    <up-swiper :list="swiperList" class="vw-100" indicator indicatorMode="dot" circular previousMargin="30" height="200"
      nextMargin="30" radius="5" bgColor="#ffffff"></up-swiper>
    <product-pad v-if="checkItemList" :data="checkItemList" name="体检套餐" more="/pages/body-check/index" />
    <product-pad v-if="checkItemList" :data="checkItemList" name="上门服务" more="/pages/dtd-service/index" />
    <my-tabbar :index="0"/>
  </view>
  <up-popup :show="showCityPad" mode="left" @close="handleCityPadClosed()" closeOnClickOverlay>
  </up-popup>
</template>

<style lang="scss">
uni-page-body {
  width: 100vw;
  height: 100vh;
  background-color: #e1e1e1;
}

.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
</style>
<style lang="scss" scoped>
.home.content {}
</style>
